<template>
    <div ref="elRef" class="flex gap-10px justify-center">
        <template v-for="(item, index) in list" :key="item.prop || index">
            <template v-if="item.render">
                <BaseRender :render="item.render" v-bind="{ item, list }"></BaseRender>
            </template>
            <template v-else-if="item.prop && slots[item.prop]">
                <slot :name="item.prop" v-bind="{ item, list }"></slot>
            </template>
            <template v-else-if="item.component">
                <component :is="item.component" v-bind="item.props || {}"></component>
            </template>
            <template v-else-if="item.type === `edit`">
                <BaseRender :render="renderEditBtn" v-bind="{ item, list }"></BaseRender>
            </template>
            <template v-else-if="item.type === `delete`">
                <BaseRender :render="renderDeleteBtn" v-bind="{ item, list }"></BaseRender>
            </template>
        </template>
    </div>
</template>

<script lang="jsx" setup>
import { ref, toValue, withDirectives } from 'vue'
import BaseRender from './BaseRender.vue'

defineOptions({
    name: 'BaseTableOperateList',
    inheritAttrs: false
})

const elRef = ref(null)

// type List = ListOption[]
// type ListOption = {
//     type?: 'edit' | 'delete',
//     prop?: string,
//     label?: string,
//     disabled?: boolean,
//     props?: Record<string, unknown>,
//     render?: (...args: unknown[]) => VNodeChild,
//     component?: Component
// }

const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

const renderEditBtn = ({ item }) => {
    if (typeof item.isShow !== 'undefined' && !toValue(item.isShow)) return null
    const withPerms = item.hasOwnProperty('perms') && item.skipPerms !== true
    const vnode = (
        <div
            class={['operate-btn color-$el-color-primary cursor-pointer select-none', { 'is-disabled': item.disabled }]}
            {...item.props || {}}
        >
            { item.label || '编辑' }
        </div>
    )
    if (!withPerms) {
        return withDirectives(vnode, [
            [permsDirective, item.perms, null, { skip: item.skipPerms }]
        ])
    }
    return vnode
}

const renderDeleteBtn = ({ item }) => {
    if (typeof item.isShow !== 'undefined' && !toValue(item.isShow)) return null
    const withPerms = item.hasOwnProperty('perms') && item.skipPerms !== true
    const vnode = (
        <div
            class={['operate-btn color-$el-color-error cursor-pointer select-none', { 'is-disabled': item.disabled }]}
            {...item.props || {}}
        >
            { item.label || '删除' }
        </div>
    )
    if (!withPerms) {
        return withDirectives(vnode, [
            [permsDirective, item.perms, null, { skip: item.skipPerms }]
        ])
    }
    return vnode
}

defineExpose({
    elRef
})
</script>

<style lang="scss" scoped>
.operate-btn {
    &.is-disabled {
        pointer-events: none;
        color: var(--el-text-color-disabled);
    }
}
</style>